<template>
  <div>
    <div class="card-shadow">
      <ul>
        <li class="grey">订&nbsp;单&nbsp;号：<span class="dark">{{order.orderNo}}</span></li>
        <li><span class="grey">服务类型：</span> <span class="tips">育儿知识</span></li>
        <li class="grey">下单时间：{{order.createDate}}</li>
        <li class="grey">姓名：{{order.name}}</li>
        <li class="grey">联系方式：{{order.phone}}</li>
      </ul>
    </div>
    <div class="card card-shadow">

    </div>
  </div>
</template>
<script>
  import getOrderDetail from '@/interface/order/getOrderDetail'

  export default {
    data () {
      return {
        order: {}
      }
    },
    mounted () {
      const { id } = this.$root.$mp.query
      getOrderDetail({ id }).then(data => {
        this.order = data
      })
    }
  }
</script>
<style lang="less" scoped>
  .card-shadow{
    background: #fff;
    margin-bottom: 30rpx;
    ul {
      padding: 20rpx 28rpx 47rpx;
      li {
        font-size: 28rpx;
        margin: 20rpx 0;
        .tips{
          display: inline-block;
          border-radius: 4rpx;
          background-color: rgb(250, 75, 112);
          padding: 0 10px;
          height: 54rpx;
          line-height: 54rpx;
          text-align: center;
          color: #fff;
        }
      }
    }
  }
</style>
